<template>
<div> 
    姓:<input type="text" v-model="person.firstName">
    名:<input type="text" v-model="person.lastName"><br>
    <span>全名:{{person.fullName}}</span><br>
    全名:<input type="text" v-model="person.fullName">
</div>
</template>

<script>
import { reactive,computed } from 'vue'
   export default {
        name:  '',
        components: {},
        setup(){
            let person = reactive({
                firstName:"张",
                lastName:"三",
            })

            //计算属性简写方式
            //  person.fullName = computed(()=>{
            //     return person.firstName+ "-" +person.lastName;
            //  })
            
            //计算属性考虑修改
             person.fullName = computed({
                get(){
                 return person.firstName+ "-" +person.lastName;
                },
                set(value){
                 let namearr = value.split("-");
                 person.firstName = namearr[0];
                 person.lastName = namearr[1];
                }
               
             })
            return {
                person,
            }
        }
   }
</script>

<style scoped>

</style>